<div>
  <div class="sub-navbar">
    <div class="container">
      <h4>{{userName}} 收藏的话题</h4>
    </div>
  </div>
  <div class="container club">
    <div class="col-sm-9">
      <div class="panel panel-default">
        <div class="panel-body club-topic-list" v-if="collects.length > 0">
          <div class="media item" v-for="item in collects">
            <div class="media-left">
              <a href="#">
                <img class="media-object avatar-48" v-bind:src="item.author.avatar">
              </a>
            </div>
            <div class="media-body">
              <h4 class="media-heading title"><span v-html="item.zoneIcon"></span> <a href="/topic/{{ item._id}}/show?appId=<%= appId %>">{{ item.title }}</a></h4>
              <div class="info">
                <a class="user-name">{{ item.author.loginname }}</a> •
                <span>
                  <abbr class="timeago"> 最后一次编辑是 {{ item.update_at }}</abbr>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="panel-body" v-else>
          无数据
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  var appId = $('[name=app-id]').val();
  var pagePrefix = '<%= apiPrefix.page %>';
  var dataPrefix = '<%= apiPrefix.data %>';

  var vue = new Vue({
    el: '#app',
    data: {
      userName: '',
      userId: '',
      collects: [],
      currentPage: 1,
      pages: 1,
      errorMsg: '',
      canLoadData: false
    },
    methods: {
      getData: function(currentPage) {
        if (currentPage > vue.pages) return;

        $.post( dataPrefix + '/user/' + vue.userId + '/collectTopics?' + 'currentPage=' + currentPage,
          {
            appId: appId,
          },
          function(result) {
            canLoadData = true;

            if (result.err) {
              vue.errorMsg = result.err;
              return;
            }

            moment.locale('zh-cn');

            result.data.forEach(function(item) {
              item.update_at_age = moment(item.update_at).fromNow();
              vue.collects.push(item);
            });

            vue.currentPage = currentPage;
            vue.pages = result.pages;
        });
      }
    }
  });

  vue.userName = '<%= typeof(userName) !== "undefined" ? userName : "" %>';
  vue.userId = '<%= typeof(userId) !== "undefined" ? userId : "" %>';

  vue.getData(vue.currentPage);

  var scrollButtom = new ScrollButtom();
  scrollButtom.init(function() {
    if (vue.currentPage < vue.pages && canLoadData) {
      canLoadData = false;
      vue.getData(vue.currentPage + 1);
    }
  });
</script>
